<ion-header>

  <ion-toolbar>
    <ion-title>Block Buttons</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content padding style="text-align:center">

  <p>
    <a ion-button block href="#">a[ion-button][block]</a>
    <button ion-button block>button[ion-button][block]</button>
  </p>

  <p>
    <a ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
    <button ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
  </p>

  <p>
    <a ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</a>
    <button ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</button>
  </p>

  <p>
    <a ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</a>
    <button ion-button block clear color="dark">button[ion-button][clear][block][dark]</button>
  </p>

  <p>
    <a ion-button block round href="#">a[ion-button][block][round]</a>
    <button ion-button block round>button[ion-button][block][round]</button>
  </p>

  <p>
    <a ion-button block round outline href="#">a[ion-button][block][round][outline]</a>
    <button ion-button block round outline>button[ion-button][block][round][outline]</button>
  </p>

  <p>
    <button ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
  </p>

</ion-content>
